<template>
    <div>
       <h1>我是生命周期函数组件------{{msg}}</h1> 
       <button @click="setMsg()">我是改变的方法</button>
    </div>
</template>

<script>
// Home 挂载到根组件
/* 1-引入组件 
* 2-挂载组件
*3-在模板中使用
*
*生命周期函数：
*  组件挂载以及组件更新，组件销毁的时候的触发的一系列方法---------生命周期函数
*
*
*/
export default {
    data(){
        return{
          msg:'all-life all-change'
        }
    },
    methods:{
          setMsg(){
              this.msg = '我是改变后的数据'
          }
    },
     // 生命周期钩子函数
      beforeCreate(){
            console.log('实例刚刚被创建1');
        },
        created(){
            console.log('实例已经创建完成2');
        },
        beforeMount(){
            console.log('模板编译之前3');
        },
        mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
            console.log('模板编译完成4');
        },
        beforeUpdate(){
            console.log('数据更新之前');
        },
        updated(){
            console.log('数据更新完毕');
        },
        beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
            console.log('实例销毁之前');
        },
        destroyed(){
            console.log('实例销毁完成');
        }
    
}
</script>

<style scoped>
h1{
    color: aqua;
}
</style>
